<template>
  <div>
      <h3>人气推荐</h3>
      <dl v-for="item in hotGoodsList" :key="item.id">
        <dt><img :src="item.list_pic_url"></dt>
        <dd>
          <h3>{{item.name}}</h3>
          <p>{{item.goods_brief}}</p>
          <span>{{item.retail_price|Rmb}}</span>
        </dd>
      </dl>
  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  props:['hotGoodsList']
}
</script>

<style scoped lang='less'>
  h3{
    text-align: center;
  }
  dl{
    display: flex;
    background: #fafafa;
    margin: 10px 0;
    justify-content: space-around;
    dt{
      width: 88px;
      height: 88px;
      img{
        width: 100%;
      }
    }
    dd{
      margin-left: -40px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      h3{
        font-size: 18px;
      }
      p{
        font-size: 10px;
      }
      span{
        color:red;
        font-size: 15px;
      }
    }
  }
</style>